﻿@page "/treeview/icons-and-images"

@using Syncfusion.Blazor.Navigations
@inject Microsoft.AspNetCore.Components.NavigationManager UriHelper
@inherits SampleBaseComponent;

<SampleDescription>
   <p>The <a href='https://www.syncfusion.com/blazor-components/blazor-treeview' target='_blank'>Blazor TreeView</a> sample demonstrates that the node can be configured by icons/images in TreeView. Click on Icon or double click on node to expand/collapse it, and show the icons/images that is configured with nodes</p> 
</SampleDescription>
<ActionDescription>
   <p>The TreeView component has the built-in option to customize each node's appearance with the icons and images by mapping the IconCss and ImageUrl fields. In this demo, the TreeView is showcased like a file system with custom icons and images.</p>
</ActionDescription>

<div class="control-section">
    <div class="control_wrapper">
        <SfTreeView TValue="TreeItem" SortOrder="Syncfusion.Blazor.Navigations.SortOrder.Ascending">
            <TreeViewFieldsSettings DataSource="@TreeDataSource" Id="NodeId" Text="NodeText" Expanded="Expanded" Child="@("Child")" IconCss="Icon"></TreeViewFieldsSettings>
        </SfTreeView>
    </div>
</div>

@code{
    List<TreeItem> TreeDataSource = new List<TreeItem>();

    protected override void OnInitialized()
    {
        base.OnInitialized();
        TreeDataSource.Add(new TreeItem
        {
            NodeId = "01",
            NodeText = "Music",
            Icon = "folder",
            Child = new List<TreeItem>()
            {
                new TreeItem { NodeId = "01-01", NodeText = "Gouttes.mp3", Icon = "audio" }
            },
        });

        TreeDataSource.Add(new TreeItem
        {
            NodeId = "02",
            NodeText = "Videos",
            Icon = "folder",
            Child = new List<TreeItem>()
            {
                new TreeItem { NodeId = "02-01", NodeText = "Naturals.mp4", Icon = "video" },
                new TreeItem { NodeId = "02-02", NodeText = "Wild.mpeg", Icon = "video" },
            },
        });

        TreeDataSource.Add(new TreeItem
        {
            NodeId = "03",
            NodeText = "Documents",
            Icon = "folder",
            Child = new List<TreeItem>()
            {
                new TreeItem { NodeId = "03-01", NodeText = "Environment Pollution.docx", Icon = "docx" },
                new TreeItem { NodeId = "03-02", NodeText = "Global Water, Sanitation, & Hygiene.docx", Icon = "docx" },
                new TreeItem { NodeId = "03-03", NodeText = "Global Warming.ppt", Icon = "ppt" },
                new TreeItem { NodeId = "03-04", NodeText = "Social Network.pdf", Icon = "pdf" },
                new TreeItem { NodeId = "03-05", NodeText = "Youth Empowerment.pdf", Icon = "pdf" },
            },
        });


        TreeDataSource.Add(new TreeItem
        {
            NodeId = "04",
            NodeText = "Downloads",
            Icon = "folder",
            Child = new List<TreeItem>()
            {
                new TreeItem { NodeId = "04-01", NodeText = "UI-Guide.pdf", Icon = "pdf" },
                new TreeItem { NodeId = "04-02", NodeText = "Tutorials.zip", Icon = "zip" },
                new TreeItem { NodeId = "04-03", NodeText = "Game.exe", Icon = "exe" },
                new TreeItem { NodeId = "04-04", NodeText = "TypeScript.7z", Icon = "zip" },
            },
        });
    }

    class TreeItem
    {
        public string NodeId { get; set; }
        public string NodeText { get; set; }
        public string Icon { get; set; }
        public bool Expanded { get; set; }
        public bool Selected { get; set; }
        public List<TreeItem> Child;
    }
}

<style>
    .control_wrapper {
        max-width: 500px;
        margin: auto;
        border: 1px solid #dddddd;
        border-radius: 3px;
    }

    .e-treeview .e-list-img {
        width: 25px;
        height: 25px;
    }
    /* Loading sprite image for TreeView */
    .e-treeview .e-list-icon {
        background-repeat: no-repeat;
        background-image: url('@UriHelper.ToAbsoluteUri($"images/treeview/file-icons.png")');
        height: 20px;
    }
        /* Specify the Icon positions based upon class name */
        .e-treeview .e-list-icon.folder {
            background-position: -197px -552px
        }

        .e-treeview .e-list-icon.docx {
            background-position: -197px -20px
        }

        .e-treeview .e-list-icon.ppt {
            background-position: -197px -48px
        }

        .e-treeview .e-list-icon.pdf {
            background-position: -197px -104px
        }

        .e-treeview .e-list-icon.images {
            background-position: -197px -132px
        }

        .e-treeview .e-list-icon.zip {
            background-position: -197px -188px
        }

        .e-treeview .e-list-icon.audio {
            background-position: -197px -244px
        }

        .e-treeview .e-list-icon.video {
            background-position: -197px -272px
        }

        .e-treeview .e-list-icon.exe {
            background-position: -197px -412px
        }
</style>